<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<i class="fa fa-angle-left" @click="$router.go(-1)"></i>
			<p>商家信息</p>
		</header>

		<!-- 加载状态 -->
		<div class="loading-container" v-if="isLoading">
			<div class="loading-text">加载中...</div>
		</div>

		<!-- 错误状态 -->
		<div class="error-container" v-else-if="hasError">
			<div class="error-text">
				<p>加载失败</p>
				<p>商家ID: {{ businessId }}</p>
				<p>{{ errorMessage }}</p>
				<button @click="retryLoad" class="retry-btn">重试</button>
			</div>
		</div>

		<!-- 正常内容 -->
		<div v-else>
			<!-- 商家logo部分 -->
			<div class="business-logo" v-if="business && business.businessImg">
				<img :src="business.businessImg" alt="商家图片">
			</div>
			<div class="business-logo-placeholder" v-else-if="business">
				<div class="placeholder-img">
					<i class="fa fa-image"></i>
					<p>暂无图片</p>
				</div>
			</div>

			<!-- 商家信息部分 -->
			<div class="business-info" v-if="business && business.businessName">
				<h1>{{business.businessName}}</h1>
				<p>&#165;{{business.starPrice || 0}}起送 &#165;{{business.deliveryPrice || 0}}配送</p>
				<p>{{business.businessExplain || '暂无介绍'}}</p>
			</div>
			<div class="business-info-placeholder" v-else>
				<h1>商家信息加载中...</h1>
			</div>

			<!-- 食品列表部分 -->
			<ul class="food" v-if="foodArr && foodArr.length > 0">
				<li v-for="(item, index) in foodArr" :key="item.foodId || index">
					<div class="food-left">
						<img :src="item.foodImg || '/src/assets/sp01.png'" alt="Food Image" @error="handleImageError">
						<div class="food-left-info">
							<h3>{{ item.foodName || '未知食品' }}</h3>
							<p>{{ item.foodExplain || '暂无描述' }}</p>
							<p>&#165;{{ item.foodPrice || 0 }}</p>
						</div>
					</div>
					<div class="food-right">
						<div>
							<i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity!=0"></i>
						</div>
						<p><span v-show="item.quantity!=0">{{item.quantity}}</span></p>
						<div>
							<i class="fa fa-plus-circle" @click="add(index)"></i>
						</div>
					</div>
				</li>
			</ul>
			<div class="no-food" v-else>
				<p>暂无食品信息</p>
			</div>
		</div>

		<!-- 购物车部分 -->
		<div class="cart">
			<div class="cart-left">
				<div class="cart-left-icon" 
					 @click="showCartDetail" 
					 :style="totalQuantity==0?'background-color:#505051;':'background-color:#3190E8;'"
					 style="cursor: pointer;">
					<i class="fa fa-shopping-cart"></i>
					<div class="cart-left-icon-quantity" v-show="totalQuantity!=0">{{totalQuantity}}</div>
				</div>
				<div class="cart-left-info">
					<p>&#165;{{totalPrice}}</p>
					<p>另需配送费{{business ? business.deliveryPrice : 0}}元</p>
				</div>
			</div>
			<div class="cart-right">
				<!-- 不够起送费 -->
				<div class="cart-right-item" v-show="business && totalSettle<business.starPrice" style="background-color: #535356;cursor: default;">
					&#165;{{business ? business.starPrice : 0}}起送
				</div>
				<!-- 达到起送费 -->
				<div class="cart-right-item" @click="toOrder" v-show="business && totalSettle>=business.starPrice">
					去结算
				</div>
			</div>
		</div>

		<!-- 购物车详情弹窗 -->
		<div class="cart-detail-overlay" v-show="showCartDetailModal" @click="hideCartDetail">
			<div class="cart-detail-modal" @click.stop>
				<div class="cart-detail-header">
					<h3>购物车详情</h3>
					<i class="fa fa-times close-btn" @click="hideCartDetail"></i>
				</div>
				<div class="cart-detail-content">
					<div class="cart-item" v-for="(item, index) in cartItems" :key="index">
						<div class="cart-item-info">
							<img :src="item.foodImg || '/src/assets/sp01.png'" @error="handleImageError" alt="Food Image" class="cart-item-img">
							<div class="cart-item-details">
								<h4>{{item.foodName}}</h4>
								<p class="cart-item-desc">{{item.foodExplain}}</p>
								<p class="cart-item-price">¥{{item.foodPrice}}</p>
							</div>
						</div>
						<div class="cart-item-controls">
							<div class="quantity-control">
								<i class="fa fa-minus-circle" @click="minus(getFoodIndexById(item.foodId))"></i>
								<span class="quantity">{{item.quantity}}</span>
								<i class="fa fa-plus-circle" @click="add(getFoodIndexById(item.foodId))"></i>
							</div>
							<div class="item-total">¥{{(item.foodPrice * item.quantity).toFixed(2)}}</div>
						</div>
					</div>
					<div class="cart-empty" v-if="cartItems.length === 0">
						<i class="fa fa-shopping-cart empty-icon"></i>
						<p>购物车是空的</p>
						<p>快去选购商品吧！</p>
					</div>
				</div>
				<div class="cart-detail-footer" v-if="cartItems.length > 0">
					<div class="cart-summary">
						<div class="summary-row">
							<span>商品总价</span>
							<span>¥{{totalPrice}}</span>
						</div>
						<div class="summary-row">
							<span>配送费</span>
							<span>¥{{business ? business.deliveryPrice : 0}}</span>
						</div>
						<div class="summary-row total-row">
							<span>合计</span>
							<span>¥{{totalSettle}}</span>
						</div>
					</div>
					<div class="cart-actions">
						<button class="clear-cart-btn" @click="clearCart">清空购物车</button>
						<button class="checkout-btn" 
								@click="toOrder" 
								:disabled="business && totalSettle < business.starPrice"
								:class="{'disabled': business && totalSettle < business.starPrice}">
							{{ business && totalSettle < business.starPrice ? `还差¥${(business.starPrice - totalSettle).toFixed(2)}起送` : '去结算' }}
						</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'BusinessInfo',
		data() {
			return {
				businessId: this.$route.query.businessId,
				business: null,
				foodArr: [],
				user: {},
				isLoading: true,
				hasError: false,
				errorMessage: '',
				showCartDetailModal: false  // 购物车详情弹窗显示状态
			}
		},
		created() {
			console.log('=== BusinessInfo组件初始化 ===');
			console.log('商家ID:', this.businessId);
			
			if (!this.businessId) {
				this.hasError = true;
				this.errorMessage = '商家ID缺失';
				this.isLoading = false;
				return;
			}
			
			this.user = this.$getSessionStorage('user');
			console.log('当前用户:', this.user);
			
			this.loadBusinessData();
		},
		methods: {
			// 加载商家数据
			async loadBusinessData() {
				this.isLoading = true;
				this.hasError = false;
				this.errorMessage = '';
				
				try {
					// 并行请求商家信息和食品列表
					const [businessResponse, foodResponse] = await Promise.all([
						this.getBusinessInfo(),
						this.getFoodList()
					]);
					
					console.log('所有数据加载完成');
					
					// 如果用户已登录，获取购物车信息
					if (this.user != null && this.foodArr.length > 0) {
						await this.listCart();
					}
					
				} catch (error) {
					console.error('加载数据失败:', error);
					this.hasError = true;
					this.errorMessage = error.message || '数据加载失败';
				} finally {
					this.isLoading = false;
				}
			},
			
			// 获取商家信息
			getBusinessInfo() {
				return new Promise((resolve, reject) => {
					this.$axios.post('/api/BusinessController/getBusinessById', this.$qs.stringify({
						businessId: this.businessId
					})).then(response => {
						console.log('商家信息API响应:', response);
						// 检查响应数据
						const businessData = response.data || response;
						console.log('商家信息数据:', businessData);
						
						if (businessData && typeof businessData === 'object') {
							this.business = businessData;
							console.log('商家信息设置成功:', this.business);
							resolve(businessData);
						} else {
							console.warn('商家信息响应为空或格式错误:', businessData);
							reject(new Error('商家信息获取失败'));
						}
					}).catch(error => {
						console.error('获取商家信息失败:', error);
						reject(error);
					});
				});
			},
			
			// 获取食品列表
			getFoodList() {
				return new Promise((resolve, reject) => {
					this.$axios.post('/api/FoodController/listFoodByBusinessId', this.$qs.stringify({
						businessId: this.businessId
					})).then(response => {
						console.log('食品列表API响应:', response);
						// 检查响应数据
						const foodData = response.data || response;
						console.log('食品列表数据:', foodData);
						
						if (foodData && Array.isArray(foodData)) {
							this.foodArr = foodData;
							console.log('食品数量:', this.foodArr.length);
							
							// 初始化数量
							for (let i = 0; i < this.foodArr.length; i++) {
								this.foodArr[i].quantity = 0;
							}
							
							resolve(foodData);
						} else {
							console.warn('食品列表响应格式错误:', typeof foodData, foodData);
							// 即使食品列表为空也不算错误
							this.foodArr = [];
							resolve([]);
						}
					}).catch(error => {
						console.error('获取食品列表失败:', error);
						reject(error);
					});
				});
			},
			
			// 重试加载
			retryLoad() {
				console.log('重试加载数据');
				this.loadBusinessData();
			},
			
			// 处理图片加载错误
			handleImageError(event) {
				console.log('图片加载失败，使用默认图片');
				event.target.src = '/src/assets/sp01.png';
			},
			
			listCart() {
				this.$axios.post('/api/CartController/listCart', this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId
				})).then(response => {
					let cartArr = response.data || response;  // 使用response.data获取实际数据
					console.log('购物车数据:', cartArr);
					
					// 确保cartArr是数组
					if (!Array.isArray(cartArr)) {
						console.warn('购物车数据不是数组:', typeof cartArr, cartArr);
						cartArr = [];
					}
					
					for (let foodItem of this.foodArr) {
						foodItem.quantity = 0;
						for (let cartItem of cartArr) {
							if (cartItem.foodId == foodItem.foodId) {
								foodItem.quantity = cartItem.quantity;
							}
						}
					}
					this.foodArr.sort();
				}).catch(error => {
					console.error('获取购物车失败:', error);
				});
			},
			add(index) {
				if (this.user == null) {
					this.$router.push({
						path: '/login'
					});
					return;
				}
				if (this.foodArr[index].quantity == 0) {
					this.savaCart(index);
				} else {
					this.updateCart(index, 1);
				}
			},
			minus(index) {
				if (this.user == null) {
					this.$router.push({
						path: '/login'
					});
					return;
				}

				if (this.foodArr[index].quantity > 1) {
					this.updateCart(index, -1);
				} else {
					this.removeCart(index);
				}
			},
			savaCart(index) {
				this.$axios.post('/api/CartController/saveCart', this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId
				})).then(response => {
					let result = response.data || response;  // 获取实际返回值
					console.log('添加购物车响应:', result);
					
					if (result == 1) {
						this.foodArr[index].quantity = 1;
						this.foodArr.sort();
						console.log('添加购物车成功');
					} else {
						console.error('添加购物车失败，返回值:', result);
						alert('向购物车中添加食品失败！');
					}
				}).catch(error => {
					console.error('添加购物车异常:', error);
					alert('向购物车中添加食品失败！');
				});
			},
			updateCart(index, num) {
				this.$axios.post('/api/CartController/updateCart', this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId,
					quantity: this.foodArr[index].quantity + num
				})).then(response => {
					let result = response.data || response;  // 获取实际返回值
					console.log('更新购物车响应:', result);
					
					if (result == 1) {
						this.foodArr[index].quantity += num;
						this.foodArr.sort();
						console.log('更新购物车成功');
					} else {
						console.error('更新购物车失败，返回值:', result);
						alert('向购物车中更新食品失败！');
					}
				}).catch(error => {
					console.error('更新购物车异常:', error);
					alert('向购物车中更新食品失败！');
				});
			},
			removeCart(index) {
				console.log('删除购物车请求参数:', {
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId,
					foodName: this.foodArr[index].foodName
				});
				
				this.$axios.post('/api/CartController/removeCart', this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId,
					foodId: this.foodArr[index].foodId
				})).then(response => {
					let result = response.data || response;  // 获取实际返回值
					console.log('删除购物车响应:', response);
					console.log('删除购物车返回值:', result);
					
					// 根据后端逻辑，删除成功返回1（影响行数），失败返回0
					if (result == 1) {
						this.foodArr[index].quantity = 0;
						this.foodArr.sort();
						console.log('删除购物车成功');
					} else if (result == 0) {
						// 返回0可能意味着没有找到要删除的记录，但我们仍然将前端状态设为0
						console.warn('删除购物车返回0，可能记录不存在，但仍设置前端状态为0');
						this.foodArr[index].quantity = 0;
						this.foodArr.sort();
					} else {
						console.error('删除购物车失败，返回值:', result);
						alert('从购物车中删除食品失败！');
					}
				}).catch(error => {
					console.error('删除购物车异常:', error);
					alert('从购物车中删除食品失败！');
				});
			},
			toOrder() {
				if (this.business && this.business.businessId) {
					this.$router.push({
						path: '/orders',
						query: {
							businessId: this.business.businessId
						}
					});
				}
			},
			
			// 显示购物车详情弹窗
			showCartDetail() {
				if (this.totalQuantity > 0) {
					this.showCartDetailModal = true;
					console.log('显示购物车详情，商品数量:', this.totalQuantity);
				} else {
					console.log('购物车为空，不显示详情');
				}
			},
			
			// 隐藏购物车详情弹窗
			hideCartDetail() {
				this.showCartDetailModal = false;
				console.log('隐藏购物车详情');
			},
			
			// 根据foodId获取在foodArr中的索引
			getFoodIndexById(foodId) {
				for (let i = 0; i < this.foodArr.length; i++) {
					if (this.foodArr[i].foodId === foodId) {
						return i;
					}
				}
				return -1;
			},
			
			// 清空购物车
			clearCart() {
				if (confirm('确定要清空购物车吗？')) {
					// 遍历购物车中的商品，逐个删除
					const cartItemsCopy = [...this.cartItems]; // 创建副本避免在循环中修改原数组
					
					cartItemsCopy.forEach(item => {
						const index = this.getFoodIndexById(item.foodId);
						if (index !== -1) {
							this.removeCart(index);
						}
					});
					
					// 关闭弹窗
					this.hideCartDetail();
					console.log('购物车已清空');
				}
			}
		},
		computed: {
			totalPrice() {
				let total = 0;
				for (let item of this.foodArr) {
					total += item.foodPrice * item.quantity;
				}
				return total;
			},
			totalQuantity() {
				let quantity = 0;
				for (let item of this.foodArr) {
					quantity += item.quantity;
				}
				return quantity;
			},
			totalSettle() {
				return this.totalPrice + (this.business ? this.business.deliveryPrice : 0);
			},
			// 购物车中的商品列表（只包含数量大于0的商品）
			cartItems() {
				return this.foodArr.filter(item => item.quantity > 0);
			}
		},
		watch: {
			// 监听路由参数变化
			'$route.query.businessId': {
				handler(newBusinessId, oldBusinessId) {
					console.log('=== 路由参数变化 ===');
					console.log('新商家ID:', newBusinessId);
					console.log('旧商家ID:', oldBusinessId);
					
					if (newBusinessId && newBusinessId !== oldBusinessId) {
						this.businessId = newBusinessId;
						this.business = null;
						this.foodArr = [];
						this.hasError = false;
						this.errorMessage = '';
						this.isLoading = true;
						
						// 重新加载数据
						this.loadBusinessData();
					}
				},
				immediate: false
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper header i {
		font-size: 6vw;
		position: absolute;
		left: 4vw;
		cursor: pointer;
	}

	/****************** 商家logo部分 ******************/
	.wrapper .business-logo {
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}

	/****************** 商家信息部分 ******************/
	.wrapper .business-info {
		width: 100%;
		height: 20vw;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-info h1 {
		font-size: 5vw;
	}

	.wrapper .business-info p {
		font-size: 3vw;
		color: #666;
		margin-top: 1vw;
	}

	/****************** 食品列表部分 ******************/
	.wrapper .food {
		width: 100%;
		/*使用下外边距避开footer部分*/
		margin-bottom: 14vw;
	}

	.wrapper .food li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .food li .food-left {
		display: flex;
		align-items: center;
	}

	.wrapper .food li .food-left img {
		width: 20vw;
		height: 20vw;
	}

	.wrapper .food li .food-left .food-left-info {
		margin-left: 3vw;
	}

	.wrapper .food li .food-left .food-left-info h3 {
		font-size: 3.8vw;
		color: #555;
	}

	.wrapper .food li .food-left .food-left-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}

	.wrapper .food li .food-right {
		width: 16vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .food li .food-right .fa-minus-circle {
		font-size: 5.5vw;
		color: #999;
		cursor: pointer;
	}

	.wrapper .food li .food-right p {
		font-size: 3.6vw;
		color: #333;
	}

	.wrapper .food li .food-right .fa-plus-circle {
		font-size: 5.5vw;
		color: #0097EF;
		cursor: pointer;
	}

	/****************** 购物车部分 ******************/
	.wrapper .cart {
		width: 100%;
		height: 14vw;

		position: fixed;
		left: 0;
		bottom: 0;

		display: flex;
	}

	.wrapper .cart .cart-left {
		flex: 2;
		background-color: #505051;
		display: flex;
	}

	.wrapper .cart .cart-left .cart-left-icon {
		width: 16vw;
		height: 16vw;
		box-sizing: border-box;
		border: solid 1.6vw #444;
		border-radius: 8vw;
		background-color: #3190E8;
		font-size: 7vw;
		color: #fff;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-top: -4vw;
		margin-left: 3vw;

		position: relative;
	}

	.wrapper .cart .cart-left .cart-left-icon-quantity {
		width: 5vw;
		height: 5vw;
		border-radius: 2.5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;

		display: flex;
		justify-content: center;
		align-items: center;

		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}

	.wrapper .cart .cart-left .cart-left-info p:first-child {
		font-size: 4.5vw;
		color: #fff;
		margin-top: 1vw;
	}

	.wrapper .cart .cart-left .cart-left-info p:last-child {
		font-size: 2.8vw;
		color: #AAA;
	}

	.wrapper .cart .cart-right {
		flex: 1;
	}

	/*达到起送费时的样式*/
	.wrapper .cart .cart-right .cart-right-item {
		width: 100%;
		height: 100%;
		background-color: #38CA73;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		cursor: pointer;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
	/*
	.wrapper .cart .cart-right .cart-right-item{
		width: 100%;
		height: 100%;
		background-color: #535356;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	*/

	/****************** 加载状态 ******************/
	.loading-container {
		width: 100%;
		height: 50vh;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading-text {
		font-size: 4vw;
		color: #666;
	}

	/****************** 错误状态 ******************/
	.error-container {
		width: 100%;
		height: 50vh;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.error-text {
		text-align: center;
		padding: 5vw;
	}

	.error-text p {
		font-size: 3.5vw;
		color: #666;
		margin: 2vw 0;
	}

	.retry-btn {
		background-color: #0097FF;
		color: white;
		border: none;
		padding: 2vw 4vw;
		border-radius: 1vw;
		font-size: 3.5vw;
		cursor: pointer;
		margin-top: 2vw;
	}

	.retry-btn:hover {
		background-color: #0080dd;
	}

	/****************** 占位符样式 ******************/
	.business-logo-placeholder {
		width: 100%;
		height: 35vw;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.placeholder-img {
		width: 40vw;
		height: 30vw;
		border: 2px dashed #ccc;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.placeholder-img i {
		font-size: 8vw;
		margin-bottom: 1vw;
	}

	.placeholder-img p {
		font-size: 3vw;
	}

	.business-info-placeholder {
		width: 100%;
		height: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.no-food {
		width: 100%;
		padding: 10vw 0;
		text-align: center;
		color: #999;
		font-size: 4vw;
		margin-bottom: 14vw;
	}

	/****************** 购物车详情弹窗 ******************/
	.cart-detail-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2000;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.cart-detail-modal {
		width: 100%;
		max-height: 80vh;
		background-color: #fff;
		border-radius: 4vw 4vw 0 0;
		display: flex;
		flex-direction: column;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.cart-detail-header {
		padding: 4vw;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.cart-detail-header h3 {
		font-size: 4.5vw;
		color: #333;
		margin: 0;
		text-align: center;
		flex: 1;
	}

	.cart-detail-header .close-btn {
		font-size: 5vw;
		color: #999;
		cursor: pointer;
		position: absolute;
		right: 4vw;
		top: 50%;
		transform: translateY(-50%);
	}

	.cart-detail-content {
		flex: 1;
		overflow-y: auto;
		max-height: 50vh;
	}

	.cart-item {
		padding: 3vw 4vw;
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cart-item-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.cart-item-img {
		width: 12vw;
		height: 12vw;
		border-radius: 2vw;
		margin-right: 3vw;
	}

	.cart-item-details h4 {
		font-size: 3.8vw;
		color: #333;
		margin: 0 0 1vw 0;
	}

	.cart-item-desc {
		font-size: 3vw;
		color: #999;
		margin: 0 0 1vw 0;
	}

	.cart-item-price {
		font-size: 3.5vw;
		color: #ff6b35;
		margin: 0;
		font-weight: bold;
	}

	.cart-item-controls {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2vw;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 2vw;
	}

	.quantity-control .fa-minus-circle,
	.quantity-control .fa-plus-circle {
		font-size: 5vw;
		cursor: pointer;
	}

	.quantity-control .fa-minus-circle {
		color: #999;
	}

	.quantity-control .fa-plus-circle {
		color: #0097EF;
	}

	.quantity-control .quantity {
		font-size: 3.6vw;
		color: #333;
		min-width: 6vw;
		text-align: center;
	}

	.item-total {
		font-size: 3.5vw;
		color: #ff6b35;
		font-weight: bold;
	}

	.cart-empty {
		padding: 10vw;
		text-align: center;
		color: #999;
	}

	.cart-empty .empty-icon {
		font-size: 12vw;
		margin-bottom: 3vw;
		color: #ddd;
	}

	.cart-empty p {
		font-size: 3.5vw;
		margin: 1vw 0;
	}

	.cart-detail-footer {
		border-top: 1px solid #eee;
		padding: 4vw;
	}

	.cart-summary {
		margin-bottom: 4vw;
	}

	.summary-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw 0;
		font-size: 3.5vw;
		color: #666;
	}

	.summary-row.total-row {
		border-top: 1px solid #eee;
		padding-top: 2vw;
		margin-top: 2vw;
		font-weight: bold;
		color: #333;
		font-size: 4vw;
	}

	.cart-actions {
		display: flex;
		gap: 3vw;
	}

	.clear-cart-btn {
		flex: 1;
		padding: 3vw;
		border: 1px solid #ddd;
		background-color: #fff;
		color: #666;
		font-size: 3.5vw;
		border-radius: 2vw;
		cursor: pointer;
	}

	.clear-cart-btn:hover {
		background-color: #f5f5f5;
	}

	.checkout-btn {
		flex: 2;
		padding: 3vw;
		border: none;
		background-color: #38CA73;
		color: #fff;
		font-size: 3.5vw;
		font-weight: bold;
		border-radius: 2vw;
		cursor: pointer;
	}

	.checkout-btn:hover {
		background-color: #2eb85c;
	}

	.checkout-btn.disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.checkout-btn.disabled:hover {
		background-color: #ccc;
	}
</style>